<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            text-align: center;
        }
        
        header {
            display: flex;
            justify-content: center;
        }
        
        .search-box {
            display: flex;
            align-items: center;
            width: 400px;
            height: 40px;
            border-radius: 30px;
            background-color: #FFE78F;
        }
        
        img {
            width: 30px;
            height: 30px;
            color: #fff;
            margin-left: 10px;
        }
        
        input {
            flex: 1;
            font-size: 14px;
            height: 100%;
            border: none;
            outline: none;
            color: #002EA6;
            background-color: transparent;
        }
        
        button {
            font-size: 14px;
            color: #002EA6;
            width: 60px;
            height: 100%;
            border-radius: 0 20px 20px 0;
            border: 0;
            background-color: #FFE78F;
            cursor: pointer;
        }
        
        #menu {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            background-color: #FFE78F;
            transition-duration: 0.8s;
        }
        .hidden {
            opacity: 0;
        }
        #menu a {
            line-height: 50px;
            margin: 0 20px;
            font-size: 18px;
            color: #002EA6;
            text-decoration: none;
        }
        
        p {
            position: relative;
            height: 2000px;
        }
        
        .bot {
            position: absolute;
            bottom: 0;
            font-size: 20px;
            color: #002EA6;
        }
    </style>
    <title>顶部栏吸顶效果</title>
</head>
<body>
<header>
    <div class="search-box">
        <img src="./search.png" alt="">
        <input type="text" placeholder="请输入">
        <button>搜索</button>
    </div>
</header>
<div id="menu" class="hidden">
    <a href="#">点评高分</a>
    <a href="#">新增店家</a>
    <a href="#">减配送费</a>
    <a href="#">天天神卷</a>
</div>
<!-- 做一个距离延长屏幕 -->
<p>
    <span class="bot">到底啦!!!</span>
</p>
</body>
<script>
    const menu = document.querySelector("#menu")
    window.onscroll = function() {
        //为了保证兼容性，这里取两个值，哪个有值取哪一个
        //scrollTop就是触发滚轮事件时滚轮的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log("滚动距离" + scrollTop);
        if (scrollTop>50){
            menu.className = "";
        }else {
            menu.className = "hidden";
        }
    }
</script>
</html>